<template>
  <view class="uni-container">
    <uni-forms class="top" ref="form" :model="formData" validate-trigger="submit" err-show-type="toast">
      <uni-forms-item class="left" name="name" label="收件人" required>
        <uni-easyinput  placeholder="收件人" v-model="formData.name"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="tel" label="联系电话" required>
        <uni-easyinput placeholder="联系电话" v-model="formData.tel"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="is_default" label="默认" required>
        <uni-data-checkbox v-model="formData.is_default" :localdata="formOptions.is_default_localdata"></uni-data-checkbox>
      </uni-forms-item>
      <uni-forms-item name="address" label="地址" required>
        <uni-data-picker self-field="code" parent-field="parent_code" v-model="formData.address" collection="opendb-city-china" field="code as value,name as text"></uni-data-picker>
      </uni-forms-item>
      <uni-forms-item name="address_detial" label="详细地址" required>
        <uni-easyinput placeholder="详细地址" v-model="formData.address_detial"></uni-easyinput>
      </uni-forms-item>
      <view class="uni-button-group">
        <button type="primary" class="uni-button" @click="submit">提交</button>
      </view>
    </uni-forms>
  </view>
  <!-- <view class="wrap" >
  	<view class="top">
  		<view class="item">
  			<view class="left" style="width: 123px;">收货人</view>
  			<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="formData.name" />
  		</view>
  		<view class="item">
  			<view class="left">手机号码</view>
  			<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model="formData.tel" />
  		</view>
  		<view class="item" @tap="showRegionPicker">
  			<view class="left">所在地区</view>
  			<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model="formData.address" />
  		</view>
		 <uni-forms class="" ref="form" :model="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item class="item" name="address" label="地址" required style="font-size: 21px;">
			  <uni-data-picker style="height: 69px;padding: 0;" self-field="code" parent-field="parent_code" v-model="formData.address" collection="opendb-city-china" field="code as value,name as text"></uni-data-picker>
			</uni-forms-item>
		</uni-forms>
  		<view class="item address">
  			<view class="left">详细地址</view>
  			<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="formData.address_detial" />
  			</view>
  		
  	</view>
  	<view class="bottom">			 
  		<view class="default">
  			<view class="left">
  				<view class="set">设置默认地址</view>
  				<view class="tips">提醒：每次下单会默认推荐该地址</view>
  			</view>
  			<view class="right"><u-switch v-model="formData.is_default" @change = "changeDefault" ></u-switch></view>
  		</view>
  		
  	</view>
  	<u-button type="error" style="background-color: #fa3534;border-color: #fa3534;height: 54px;line-height: 54px;font-size: 20px;" shape="circle" @click="save">保存</u-button>
  	<br>
  	<u-button type="error"style="color:#606266; background-color: #ffffff;border-color: #c0c4cc;height: 54px;line-height: 54px;font-size: 20px;" shape="circle" v-if="id!=''" @click="del">删除</u-button>
  	<u-picker mode="region" ref="uPicker" v-model="show" :area-code="defaultRegion" @confirm="confirmArea" />
  </view> -->
</template>

<script>
  import { validator } from '../../js_sdk/validator/t_shop_address.js';

  const db = uniCloud.database();
  const dbCollectionName = 't_shop_address';

  function getValidator(fields) {
    let result = {}
    for (let key in validator) {
      if (fields.indexOf(key) > -1) {
        result[key] = validator[key]
      }
    }
    return result
  }

  

  export default {
    data() {
      let formData = {
        "name": "",
        "tel": "",
        "is_default": null,
        "address": "",
        "address_detial": ""
      }
      return {
        formData,
        formOptions: {
          "is_default_localdata": [
            {
              "text": "否",
              "value": 0
            },
            {
              "text": "是",
              "value": 1
            }
          ]
        },
        rules: {
          ...getValidator(Object.keys(formData))
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      
      /**
       * 验证表单并提交
       */
      submit() {
        uni.showLoading({
          mask: true
        })
        this.$refs.form.validate().then((res) => {
          return this.submitForm(res)
        }).catch(() => {
        }).finally(() => {
          uni.hideLoading()
        })
      },

      /**
       * 提交表单
       */
      submitForm(value) {
        // 使用 clientDB 提交数据
        return db.collection(dbCollectionName).add(value).then((res) => {
          uni.showToast({
            icon: 'none',
            title: '新增成功'
          })
          this.getOpenerEventChannel().emit('refreshData')
          setTimeout(() => uni.navigateBack(), 500)
        }).catch((err) => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        })
      }
    }
  }
</script>
 

<style lang="scss" scoped>
 .uni-container {
   padding: 15px;
 }
 
 .uni-input-border,
 .uni-textarea-border {
   width: 100%;
   font-size: 14px;
   color: #666;
   border: 1px #e5e5e5 solid;
   border-radius: 5px;
   box-sizing: border-box;
 }
 
 .uni-input-border {
   padding: 0 10px;
   height: 35px;
 
 }
 
 .uni-textarea-border {
   padding: 10px;
   height: 80px;
 }
 
 .uni-button-group {
   margin-top: 50px;
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   justify-content: center;
 }
 
 .uni-button {
   width: 184px;
 }
.wrap { 
	padding:0rpx 30rpx;
	.top { 
		padding: 15px;
		.item {
			display: flex;
			font-size: 21px;
			line-height: 68px;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 123px;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 13px 0;
			textarea {
				// width: 100%;
				height: 103px;
				background-color: #f7f7f7;
				line-height: 68px;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 27px;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 19px;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 43px;
			.tips {
				font-size: 16px;
			}
			.right {
			}
		}
	}
}
</style>